<template>
  <div>
    <div class="search-tools">
      <!-- 搜索栏 -->
      <Search :search="props.search" @getSearchData="getSearchData" class="search" />

      <!-- 工具栏 -->
      <n-space class="tools">
        <n-button v-for="item in props.tools" :key="item.name" :type="item.type" @click="item.handleClick">{{
          item.name
        }}</n-button>
      </n-space>
    </div>


    <!-- 表格 -->
    <n-data-table :columns="props.columns" :data="pageData.data" :bordered="true" :max-height="350" :scroll-x="1200" :loading="pageData.loading"/>

    <!-- 分页 -->
    <div class="pagination">
      <n-pagination v-model:page="pagination.page" v-model:page-size="pagination.pageSize"
        :page-count="pagination.pageCount" show-size-picker :page-sizes="pagination.pageSizes"
        @update:page="pagination.updatePage" @update:page-size="pagination.updatePageSize" />
      <p class="count">共{{pagination.itemCount}}条</p>
    </div>

  </div>
</template>

<script setup lang="ts">
import { deepClone } from '@/utils/lib/clone';
import { reactive, watch } from 'vue';
import Search from './components/Search/index.vue'

interface IProp {
  search: any
  tools: any
  columns: any
  api: Function
}



const props = defineProps<IProp>()

const pageData = reactive({
  data: [],      // 当前页数据
  searchData: {},   //  搜索栏数据对象
  loading:true
})

const pagination = reactive({
  page: 1,   //   当前页
  pageSize: 5,   // 页码
  pageCount: 1,   //  页数
  pageSizes: [5, 10, 15, 20], //  页码数组
  itemCount:0,
  updatePage: (page: number) => {
    // 更新页数
    pagination.page = page
    getData()
  },
  updatePageSize: (pageSize: number) => {
    // 更新页码
    pagination.pageSize = pageSize
    pagination.page = 1
    getData()
  }
})

// 获取表格数据
const getData = async () => {
  try {
    let data = {
      pageNo: pagination.page,
      pageSize: pagination.pageSize,
      ...pageData.searchData
    }
    console.log(data);

    const res = await props.api(data)
    if (res.data.code === 200) {
      pageData.data = res.data.data.data
      pagination.itemCount = res.data.data.dataLength
      pagination.pageCount = Math.ceil(res.data.data.dataLength / pagination.pageSize)
      pageData.loading = false
    }
  } catch (error) {
    return Promise.reject(error)
  }
}

watch(() => pageData.searchData, () => {
  getData()
})

/**
 * 获取搜索栏数据对象
 * @param searchObj 搜索栏数据对象
 */
const getSearchData = (searchObj) => {
  console.log(searchObj);

  pageData.searchData = deepClone(searchObj)
}

getData()

defineExpose({
  getData
})

</script>

<style scoped lang="less">
@import '@/styles/mixin.less';

.search-tools {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: auto 100px;
  grid-template-rows: 50px;
  grid-template-areas:
    'search tools';

  .search {
    // border: 1px solid #000;
    grid-area: search;
  }

  .tools {
    .flex(row, center, center);
    // border: 1px solid #000;
    grid-area: tools;
  }
}

.pagination {
    // border: 1px solid #000;
  margin-top: 10px;
  .flex(row, flex-end, center);
  .count{
    // border: 1px solid #000;
    margin-left: 15px;
  }
}
</style>